<%--
  Created by IntelliJ IDEA.
  User: HUAWEI
  Date: 2024/8/31
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/font-awesome/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <title>医疗健康系统登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 100vh;*/
            /*background-color: #f4f4f4;*/
        }
        div#background{
            background: black url('${pageContext.request.contextPath}/static/img/background.png') repeat-x 5% 0%;
            background-size: cover;
            -webkit-animation: STAR-MOVE  200s linear infinite;
            -moz-animation: STAR-MOVE  200s linear infinite;
            -ms-animation: STAR-MOVE  200s linear infinite;
            animation: STAR-MOVE  200s linear infinite;
        }
        div#midground{
            background:url('${pageContext.request.contextPath}/static/img/midground.png')repeat 20% 0%;
            z-index: 1;
            -webkit-animation: STAR-MOVE  100s linear infinite;
            -moz-animation: STAR-MOVE  100s linear infinite;
            -ms-animation: STAR-MOVE  100s linear infinite;
            animation: STAR-MOVE  100s linear infinite;
        }
        div#foreground{
            background:url('${pageContext.request.contextPath}/static/img/foreground.png')repeat 35% 0%;
            z-index: 2;
            -webkit-animation: STAR-MOVE  50s linear infinite;
            -moz-animation: STAR-MOVE  50s linear infinite;
            -ms-animation: STAR-MOVE  50s linear infinite;
            animation: STAR-MOVE  50s linear infinite;
        }
        .wall{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

        }
        @-webkit-keyframes STAR-MOVE {
            from {
                background-position:0% 0%
            }
            to {
                background-position: 600% 0%
            }
        }
        @keyframes STAR-MOVE {
            from {
                background-position: 0% 0%
            }
            to {
                background-position: 600% 0%
            }
        }
        .container {
            width:770px;
            background: url('${pageContext.request.contextPath}/static/img/login-background.png') no-repeat 0% 50%;
            height:450px;
            margin:0px auto 0 auto;
            position:relative;
            border-radius:5px;
            margin-top: 100px;
            /*opacity: 0.7; !* 50%透明度 *!*/
        }

        .form-group {
            margin-bottom: 15px;
            display: flex;
            justify-content: right;
            align-items: center; /* 垂直居中对齐 */
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 30%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group button {
            width: 195px;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            margin-right:84px;
            margin-left: auto;
        }
        .form-group button:hover {
            background-color: #0056b3;
        }

        .forgot-password {
            margin-top: 10px;
            text-align: center;
            display: flex;
            justify-content: right;
            align-items: center; /* 垂直居中对齐 */
            margin-right:89px;
            width:500px;
            margin-left: auto;
        }
        .forgot-password a {
            color: #007bff;
            text-decoration: none;
        }
        .container-2{
            display: flex;
            justify-content: right;
            align-items: center; /* 垂直居中对齐 */
            gap: 15px; /* 可选，设置元素间距 */
        }
        input[placeholder="验证码"]{
            width: 90px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .main{
            margin-right:85px;
            width:650px;
            margin-left: auto;
        }
        .main2{
            margin-right:49px;
            width:500px;
            margin-left: auto;
        }
        h2 {
            margin-top: 50px;
            margin-left: 530px;

        }
        .ename {
            font-family: "微软雅黑","宋体";
            font-size:14px;
            color: #b0b3b8;
            padding-bottom: 10px;
            margin-left: 539px;
        }
        .tab {
            display: flex;
            margin-bottom: 20px;
        }
        .tab button {
            flex: 1;
            padding: 10px;
            border: none;
            background-color: #eee;
            cursor: pointer;
            font-weight: bold;
            /*opacity: 0.5; !* 50%透明度 *!*/
            font-size: 16px;
            transition: background-color 0.3s, opacity 0.3s;
        }
        .tab button.active {
            background-color: #ddd;
            /*color: white;*/
            opacity: 1; /* 取消透明度 */
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        p{
            margin-top: 10px;
            text-align: center;
            display: flex;
            justify-content: right;
            align-items: center; /* 垂直居中对齐 */
            margin-right:129px;
            width:500px;
            margin-left: auto;
        }
    </style>

</head>
<body>
<div id="background" class="wall">
    <div id="midground" class="wall">
        <div id="foreground" class="wall">
            <div class="container">
                <div class="tab">
                    <button class="active" onclick="switchTab('login-password')">用户登录</button>
                    <button class="active" onclick="switchTab('login-verify')">医生登录</button>
                </div>
                <!-- 用户登录 -->
                <div id="login-password" class="tab-content active">
                    <h2>用户登录</h2>
                    <div class="ename">User Login</div>
                    <form action="${pageContext.request.contextPath}/loginUser/userLogin.do" method="post">
                        <div class="main">
                            <div class="form-group">
                                <label for="name"><i class="fa fa-fw fa-user" style="color: #1e90ff"></i>账号</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="password"><i class="fa fa-fw fa-unlock-alt" style="color: #1e90ff"></i>密码</label>
                                <input type="password" id="password" name="password" required>
                            </div>
                        </div>
                        <div class="main2">
                            <div class="container-2">
                                <input type="text" id="captcha" name="captcha" placeholder="验证码" required>
                                <img id="captchaImage" src="${pageContext.request.contextPath}/loginUser/captcha.do" width="90" height="32" style="color: white" alt="Captcha Image" onclick="refreshCaptcha()" />
                                <i onclick="refreshCaptcha()" class="fa fa-fw fa-refresh" style="color: #b7d6ff"></i>
                            </div><br/>
                        </div>
                        <div class="form-group">
                            <button type="submit">登录</button>
                        </div>
                        <div class="forgot-password">
                            <a href="${pageContext.request.contextPath}/jsp/registerP.jsp">还没有账号？立即注册！</a>
                        </div>
                        <p><font color="red">${message}</font></p>
                    </form>
                </div>

                <!-- 医生登录 -->
                <div id="login-verify" class="tab-content">
                    <h2>医生登录</h2>
                    <div class="ename">Doctor login</div>
                    <form action="${pageContext.request.contextPath}/loginUser/doctorLogin.do" method="post">
                        <div class="main">
                            <div class="form-group">
                                <label for="phone"><i class="fa fa-fw fa-phone" style="color: #1e90ff"></i>手机号</label>
                                <input type="text" id="phone" name="phone" required>
                            </div>
                            <div class="form-group">
                                <label for="password2"><i class="fa fa-fw fa-key" style="color: #1e90ff"></i>密码</label>
                                <input type="password" id="password2" name="password2" required>
                            </div>
                        </div>
                        <div class="main2">
                            <div class="container-2">
                                <input type="text" id="captcha2" name="captcha2" placeholder="验证码" required>
                                <img id="captchaImage2" src="${pageContext.request.contextPath}/loginUser/captcha.do" width="90" height="32" style="color: white" alt="Captcha Image" onclick="refreshCaptcha2()" />
                                <i onclick="refreshCaptcha2()" class="fa fa-fw fa-refresh" style="color: #b7d6ff"></i>
                            </div><br/>
                        </div>

                        <div class="form-group">
                            <button type="submit">登录</button>
                        </div>
                        <div class="forgot-password">
                            <a href="${pageContext.request.contextPath}/jsp/registerD.jsp">还没有账号？立即注册！</a>
                        </div>
                        <p><font color="red">${message}</font></p>
                    </form>
                </div>

            </div>
        </div>

    </div>

</div>

</body>
<script>
    function switchTab(tab) {
        document.querySelectorAll('.tab button').forEach(btn => {btn.classList.remove('active');});
        document.querySelectorAll('.tab-content').forEach(content => {content.classList.remove('active');});

        document.getElementById(tab).classList.add('active');
        const activeButton = document.querySelector(`.tab button[onclick="switchTab('${tab}')"]`);
        if(activeButton){
            activeButton.classList.add('active');
        }
    }
    function refreshCaptcha() {
        var captchaImage = document.getElementById("captchaImage");
        captchaImage.src = "${pageContext.request.contextPath}/loginController/captcha.do?" + new Date().getTime();
    }
    function refreshCaptcha2() {
        var captchaImage = document.getElementById("captchaImage2");
        captchaImage.src = "${pageContext.request.contextPath}/loginController/captcha.do?" + new Date().getTime();
    }
</script>
</html>
